<template>
	<view class="container">
		<view class="content">
			<!-- 地址选择区域 -->
			<view class="address-form">
				<view class="form-item area-select">
					<view class="label">服务时间</view>
					<view class="value">
						<biaofun-datetime-picker v-if="form.scheduleTime" :defaultValue="form.scheduleTime"
							@change="onDateTimeConfirm" :min-date="new Date()"
							:max-date="new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)" type="datetime"
							:show-seconds="false" />
					</view>
				</view>
				<!-- 时间选择器 -->

				<!-- 省市区选择 -->
				<view class="form-item area-select">
					<view class="label">所在地区</view>
					<view class="value">

						<text class="area-text">{{ formatAddress || '请选择所在地区' }}</text>
						<view class="location-btn">
							<!-- <uni-icons type="location" size="20" color="#2979ff"></uni-icons> -->
						</view>
					</view>
				</view>

				<!-- 详细地址输入 -->
				<view class="form-item">
					<view class="label">详细地址</view>
					<textarea class="address-detail" v-model="form.addressDetails" placeholder="请输入详细地址信息"
						:maxlength="100" />
				</view>

				<!-- 默认地址开关 -->
				<!-- <view class="form-item">
<view class="x-item">
<view class="label">默认地址</view>
<switch value="80" color="#3c8eff" :checked="place.status" @change="sliderChange" />
</view>
</view> -->
			</view>
		</view>

		<view class="btn">
			<button class="save" type="default" @click="save">保存</button>
		</view>


	</view>
</template>

<script>
	import dayjs from '@/plugin/dayjs/dayjs.min.js'
	import cityData from '@/common/js/newCity.js'
	// import { saveAddress, updateAddress, delAddress } from '@/api/address/address.js'
	import {
		modifyTheServiceAddress
	} from '@/apis/order/index.js'
	import {
		debounce
	} from '@/common/js/throttle.js'
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue'
	export default {
		components: {
			biaofunDatetimePicker
		},
		computed: {},
		watch: {
			form: {
				handler(newVal) {
					const {
						economize,
						addressCity,
						distinguish
					} = newVal
					if (economize && addressCity && distinguish) {
						this.formatAddress = `${economize} ${addressCity} ${distinguish
}`
					} else {
						this.formatAddress = ''
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				dateTimePickerVisible: '2025-3-17 17-16',
				formatAddress: '',
				form: {
					economize: '',
					addressCity: '',
					distinguish: '',
					addressDetails: '',
					scheduleTime: '',
					number: ''

				},
				pickerValue: ['', '', ''],
				areaData: cityData,
				areaList: [], // 用于lb-picker的数据
				place: {
					address: '',
					name: '',
					status: '0',
					addressCity: ''
				},
				index: '',
				userId: '',
				getDataId: '',
				dataObj: {
					incidentName: '',
					incidentPerson: this.$store.state.userId,
					source: this.$store.state.registSource,
					serviceId: ''
				},
				isDestruction: ''
			}
		},
		created() {
			// this.initAreaData()
		},
		onLoad(option) {
			console.log('新增地址', option)
			if (option.data) {
				this.form = JSON.parse(decodeURIComponent(option.data))
				this.form.scheduleTime = dayjs(this.form.scheduleTime).format('YYYY-MM-DD HH:mm')
			}
			console.log('this.form', this.form)
		},
		methods: {
			// 显示时间选择器
			showDateTimePicker() {
				this.dateTimePickerVisible = true
			},

			// 确认时间选择
			onDateTimeConfirm(time) {
				this.form.scheduleTime = time.f3
				// this.scheduleTime = value
				// this.dateTimePickerVisible = false
			},

			// 取消时间选择
			onDateTimeCancel() {
				this.dateTimePickerVisible = false
			},

			// sliderChange(e) {
			//   if (e.target.value) {
			//     this.place.status = '1'
			//   } else {
			//     this.place.status = '0'
			//   }
			//   console.log('switch1 发生 change 事件，携带值为', e.target.value, 'bol', this.place.status)
			// },
			del() {
				uni.showModal({
					title: '确定删除当前地址吗?',
					success: async res => {
						if (res.confirm) {
							let id = this.place.id
							let res = await delAddress({
								id
							})
							if (res.success) {
								uni.showToast({
									icon: 'none',
									title: '操作成功!'
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 300)
							}
						}
					}
				})
			},
			initAreaData() {
				// 确保areaData是一个数组
				if (!Array.isArray(this.areaData)) {
					console.error('areaData不是一个数组')
					return
				}
				// 转换数据格式为lb-picker支持的格式
				this.areaList = this.areaData.map(economize => ({
					label: economize.name,
					value: economize.name,
					children: economize.addressCity.map(addressCity => ({
						label: addressCity.name,
						value: addressCity.name,
						children: addressCity.distinguish
							.map(distinguish => ({
								label: distinguish,
								value: distinguish

							}))
					}))
				}))
			},

			// 显示选择器
			showPicker() {
				if (!this.tempPickerValue) {
					this.tempPickerValue = [0, 0, 0]
				}
				this.tempPickerValue = [...this.pickerValue]
				this.$refs.picker.show()
			},
			// 取消选择
			cancelPicker() {
				this.$refs.picker.close()
				this.pickerValue = [...this.tempPickerValue]
			},
			// 保存地址
			save() {

				if (!this.form.addressDetails) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}

				let data = {
					orderNumber: this.form.number,
					scheduleTime: this.form.scheduleTime + ':00',
					nurseAddress:  this.form.addressDetails, // 这里不用replace替换 因为安卓node版本有兼容问题
					isAddressModified: 1
				}

				// return
				modifyTheServiceAddress(data).then(res => {
					if (res.success) {
						uni.showToast({
							title: '修改成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;

		.content {
			padding-top: 30rpx;
		}

		.address-form {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			padding-bottom: 0;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

			.x-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.form-item {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;

				.label {
					width: 140rpx;
					font-size: 28rpx;
					color: #333;
					padding-bottom: 20rpx;
				}

				.value {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #666;

					.arrow {
						color: #999;
					}
				}

				&:last-child {
					border-bottom: none;
				}

				&.area-select {
					.header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;
					}

					.location-btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 0 16rpx;

						text {
							color: #2979ff;
							font-size: 24rpx;
							margin-top: 4rpx;
						}
					}
				}

				.label {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}

				.value {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.area-text {
						font-size: 30rpx;
						color: #999;
					}
				}

				.address-detail {
					width: 100%;
					height: 180rpx;
					font-size: 30rpx;
					line-height: 1.6;
					padding: 24rpx;
					box-sizing: border-box;
					background-color: #f8f8f8;
					border-radius: 12rpx;
					// margin-top: 16rpx;
				}
			}
		}

		.bottom-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
			background-color: #fff;
			box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);

			.save-btn {
				background-color: #2979ff;
				color: #fff;
				border-radius: 48rpx;
				font-size: 34rpx;
				font-weight: 500;
				height: 96rpx;
				line-height: 96rpx;
				box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
			}
		}
	}

	.picker-container {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #eee;

			.cancel {
				color: #666;
				font-size: 32rpx;
			}

			.title {
				color: #333;
				font-size: 32rpx;
				font-weight: 500;
			}

			.confirm {
				color: #2979ff;
				font-size: 32rpx;
			}
		}

		.picker-view {
			width: 100%;
			height: 500rpx;

			.item {
				line-height: 50px;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.btn {
		width: 750rpx;
		// height: 122rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 16rpx 40rpx;
		// align-items: ;
		// margin-top: 946rpx;
		position: fixed;
		left: 0;
		bottom: 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);

		button {
			width: 670rpx;
			height: 90rpx;
			border-radius: 8rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 90rpx;
			text-align: center;
			border: none;
		}

		button::after {
			border: none;
		}

		.save {
			background: #3c8eff;
			margin-top: 5%;
		}

		.del {
			border: 2rpx solid #3c8eff;
			color: #3c8eff;
			margin-top: 8rpx;
			box-sizing: border-box;
			margin-top: 5%;
		}
	}

	::v-deep .content {
		font-size: 32rpx;
		color: #666;
	}
</style>